.tabbar {
  align-items: center;
  bottom: 0;
  display: flex;
  height: 48px;
  justify-content: space-around;
  left: 0;
  position: fixed;
  width: 100%;
}

.loading {
  background-color: rgba(0, 0, 0, 0.6);
  height: 100%;
  left: 0;
  position: fixed;
  top: 0;
  width: 100%;

  &-f,
  &-c,
  &-i,
  &-m {
    height: 80px;
    left: 50%;
    margin: -40px 0 0 -40px;
    position: absolute;
    top: 50%;
    width: 80px;
  }

  &-f {
    background-image: url(../images/loader/football.svg);
    animation: rotatingY 2s linear infinite;
  }

  &-c {
    background-image: url(../images/loader/club.svg);
    animation: rotating 2s linear infinite;
  }

  &-i {
    background-image: url(../images/loader/inter.svg);
    animation: rotatingY 2s linear infinite;
  }

  &-m {
    background-image: url(../images/loader/milano.svg);
    animation: rotatingY 2s linear infinite;
  }
}

@keyframes rotating {
  from {
    transform: rotate(0);
  }

  to {
    transform: rotate(360deg);
  }
}

@keyframes rotatingY {
  from {
    transform: rotateY(0);
  }

  to {
    transform: rotateY(360deg);
  }
}
